<template>
  <view class="navbar">
    <!-- 左边按钮 -->
    <view class="navbar-left">
      <slot name="left"></slot>
    </view>
    <!-- 中间标题 -->
    <view class="navbar-title">
      {{ title }}
    </view>
    <!-- 右边按钮 -->
    <view class="navbar-right">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomNavbar',
  props: {
    title: String
  }
};
</script>

<style>
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  background-color: #fff;
  color: #333;
  box-shadow: 0 1px 5px rgba(0,0,0,.15);
  margin-top: 170upx;
}
.navbar-left, .navbar-right {
  display: flex;
  align-items: center;
}
.navbar-title {
  font-size: 16px;
  font-weight: bold;
}
</style>